<!DOCTYPE html>
<html>
<head>
	<title>move</title>
	<meta charset="utf-8" />
	<style type="text/css">
		.box{
			width: 100%;
			min-width: 1200px;
			margin: 0 auto;
			height: 100%;
			overflow: hidden;
		}
		.box div{
			width: 100px;
			height: 100px;
			background: lightblue;
			border-radius: 50%;
			-webkit-transition: -webkit-transform .3s ease;
		    transition: transform .3s ease;
			position: absolute;
		}
		.box div:nth-child(1){
			top: 500px;
			left: 100px;
		}
		.box div:nth-child(2){
			top: 400px;
			left: 680px;
		}
		.box div:nth-child(3){
			top: 100px;
			left: 400px;
		}
	</style>
	<script type="text/javascript" src="./js/packed_jquery.min6301986802.js"></script>
    <script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
</head>
<body>

	<div class="box">
		<div id="bm1"></div>
		<div id="bm2"></div>
		<div id="bm0"></div>
	</div>

	<script type="text/javascript">
		
		$(function () {
            var index_div_pro = [{
                sx: 110,
                sy: 110,
                mw: 3,
                mh: 1,
                bx: 8.4,
                by: 10.4,
                rx: -0.6
            },
            {
                sx: 35,
                sy: 660,
                mw: 3,
                mh: 0.5,
                bx: 6.4,
                by: 8.4,
                rx: -0.1
            },
            {
                sx: 785,
                sy: 90,
                mw: 0.3,
                mh: 0.1,
                bx: 6.5,
                by: 7.4,
                rx: -0.1
            }];

            var ePageX = null;
            var ePageY = null;

            function getMousePos(expression) {
                if (ePageX == null || ePageY == null) return null;
                var _x = $(expression).position().left;
                _x += ePageX - $(expression).parent().position().left;
                var _y = $(expression).position().top;
                _y += ePageY - $(expression).parent().position().top;
                return {
                    x: _x,
                    y: _y
                }
            };

            var index_xh = setInterval(function () {
                for (var i = 0; i < 3; i++) {
                    var mousepos = getMousePos("#bm" + i);
                    if (mousepos != null) {
                        var left = parseInt($("#bm" + i).css("left"));
                        var l = left + (index_div_pro[i].sx + index_div_pro[i].mw - (mousepos.x - 100) / index_div_pro[i].bx * index_div_pro[i].rx - left) * 0.2;
                        var top = parseInt($("#bm" + i).css("top"));
                        var t = top + (index_div_pro[i].sy + index_div_pro[i].mh - (mousepos.y - 100) / index_div_pro[i].by - top) * 0.2;
                        $("#bm" + i).css({
                            left: l,
                            top: t
                        })
                    }
                }
            },
            15);

            $("body").mousemove(function (event) {
                event = event || window.event;
                ePageX = event.pageX;
                ePageY = event.pageY;
                console.log(ePageX)
            });
              
        });
	</script>

</body>
</html>